<template>
    <div 
        ref="contextmenu_two"
        class="contextmenu_two_cp" v-show="value"
        :style="{
            top:offset_y+'px',
            left:offset_x+'px',
        }">
        <div class="item">
            <Accept_share_bt></Accept_share_bt>
        </div>
        <div class="my_divider">
            <el-divider></el-divider>
        </div>
        <div class="item">
            <Unshare_bt></Unshare_bt>
        </div>
    </div>
</template>

<script>
import Unshare_bt from '@/components/public_bt/unshare_bt'
import Accept_share_bt from '@/components/public_bt/accept_share_bt'
export default { //文件右击操作目录组件(分享)
    name: 'Contextmenu_two_cp',
    components:{Unshare_bt,Accept_share_bt},
    props:{
        value:{
            type:Boolean,
            default:false,
        },
        offset_x:{ //组件显示的坐标位置
            type:Number,
            default:0,
        },
        offset_y:{
            type:Number,
            default:0,
        },
    },
    mounted(){
        document.addEventListener('click', event => {  //如果元素不是在组件上点击的则隐藏该组件
            const e = event || window.event;
            if (this.$refs.contextmenu_two && !this.$refs.contextmenu_two.contains(e.target)) {
                this.$emit('input',false);
            }
        });
    },
    methods:{
    },
}
</script>

<style scoped lang='scss'>
.contextmenu_two_cp{
    width:250px;
    height: fit-content;
    background-color: white;
    border: 1px solid #c8ccd3;
    border-radius: 2px;
    box-shadow: 0 1px 4px 0 rgba(15,32,65,.2);
    position:fixed;
    z-index: 999;
    padding: 6px 0;
    >.my_divider{
        padding: 6px 0;
        box-sizing: border-box;
        .el-divider--horizontal{
            margin:0;
        }
    }
    >.item{
        height: 35px;
        transition: all 0.2s;
        cursor: pointer;
        >div{
            padding: 0 22px;
            justify-content: left;
        }
        &:hover{
            background-color: #f4f4f4;
        }
    }
}
</style>
